<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心飘浮动画</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        #hearts-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .heart {
            position: absolute;
            filter: drop-shadow(0 0 12px rgba(255, 105, 180, 0.8));
            will-change: transform, opacity;
            /* 缓慢震动效果 */
            animation: gentle-float 3s ease-in-out infinite alternate;
        }
        
        /* 添加轻微震动的动画 */
        @keyframes gentle-float {
            0% {
                transform: translateX(-5px) rotate(-2deg);
            }
            100% {
                transform: translateX(5px) rotate(2deg);
            }
        }
        
        #text-container {
            position: relative;
            z-index: 2;
            text-align: center;
        }
        
        #love-text {
            font-size: 5rem;
            font-weight: bold;
            color: #87CEFA; /* 浅蓝色 */
            text-shadow: 0 0 10px rgba(135, 206, 250, 0.8);
            animation: textPulse 3s ease-in-out infinite;
        }
        
        @keyframes textPulse {
            0%, 100% {
                transform: scale(1);
                text-shadow: 0 0 10px rgba(135, 206, 250, 0.8);
            }
            50% {
                transform: scale(1.1);
                text-shadow: 0 0 30px rgba(135, 206, 250, 1);
            }
        }
    </style>
</head>
<body>
    <div id="hearts-container"></div>
    <div id="text-container">
        <div id="love-text">I LOVE U</div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const heartsContainer = document.getElementById('hearts-container');
            const colors = [
                '#ff9ff3', '#fea7dc', '#ffc8dd', '#ffb6c1', '#ff69b4', 
                '#f78fb3', '#f8a5c2', '#ff9ff3', '#fea7dc', '#f78fb3'
            ];
            
            // 创建单个爱心
            function createHeart(startX, startY) {
                // 创建心形容器
                const heart = document.createElement('div');
                heart.className = 'heart';
                
                // 更大的爱心尺寸
                const size = 80 + Math.random() * 140; // 80-220px
                heart.style.width = `${size}px`;
                heart.style.height = `${size}px`;
                
                // 设置位置
                heart.style.left = `${startX}%`;
                heart.style.top = `${startY}%`;
                
                // 随机颜色
                const color = colors[Math.floor(Math.random() * colors.length)];
                
                // 创建SVG爱心
                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                svg.setAttribute("viewBox", "0 0 24 24");
                svg.style.fill = color;
                
                const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                path.setAttribute("d", "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z");
                
                svg.appendChild(path);
                heart.appendChild(svg);
                
                // 添加到容器
                heartsContainer.appendChild(heart);
                
                // 设置随机动画延迟，让每个爱心的震动不同步
                const animationDelay = Math.random() * 3;
                heart.style.animationDelay = `${animationDelay}s`;
                
                // 设置随机动画持续时间，让每个爱心有不同的震动频率
                const animationDuration = 3 + Math.random() * 2;
                heart.style.animationDuration = `${animationDuration}s`;
                
                return heart;
            }
            
            // 创建爱心上升动画
            function animateHeartRise(heart, startX, startY) {
                // 随机上升速度 - 缓慢上升
                const duration = 3 + Math.random() * 4; // 3-7秒
                
                // 随机终点位置（轻微偏移）
                const endX = startX + (Math.random() * 10 - 5); // 水平偏移±5%
                
                // 起始状态
                heart.style.opacity = '0';
                
                // 定义关键帧动画 - 爱心从当前位置向上飞
                const keyframes = [
                    { 
                        opacity: 0,
                        transform: `translate(0, 0) rotate(0deg) scale(0.8)`
                    },
                    { 
                        opacity: 0.9,
                        transform: `translate(${(endX - startX) * 0.2}%, -${startY * 0.2}%) rotate(${Math.random() * 3 - 1.5}deg) scale(0.9)`
                    },
                    { 
                        opacity: 1,
                        transform: `translate(${(endX - startX) * 0.4}%, -${startY * 0.4}%) rotate(${Math.random() * 3 - 1.5}deg) scale(1)`
                    },
                    { 
                        opacity: 1,
                        transform: `translate(${(endX - startX) * 0.6}%, -${startY * 0.6}%) rotate(${Math.random() * 3 - 1.5}deg) scale(1)`
                    },
                    { 
                        opacity: 0.9,
                        transform: `translate(${(endX - startX) * 0.8}%, -${startY * 0.8}%) rotate(${Math.random() * 3 - 1.5}deg) scale(0.9)`
                    },
                    { 
                        opacity: 0,
                        transform: `translate(${endX - startX}%, -${startY}%) rotate(${Math.random() * 3 - 1.5}deg) scale(0.8)`
                    }
                ];
                
                // 动画配置 - 使用平滑的ease-in-out缓动
                const options = {
                    duration: duration * 1000,
                    easing: 'ease-in-out',
                    fill: 'forwards'
                };
                
                // 开始动画
                const animation = heart.animate(keyframes, options);
                
                // 动画完成后移除元素
                animation.onfinish = () => {
                    heart.remove();
                };
            }
            
            // 创建底部爱心
            function createBottomHeart() {
                const startX = Math.random() * 100; // 0-100% 水平位置
                const startY = 60 + Math.random() * 40; // 60-100% 垂直位置（页面底部区域）
                
                const heart = createHeart(startX, startY);
                animateHeartRise(heart, startX, startY);
            }
            
            // 创建中部爱心
            function createMiddleHeart() {
                const startX = Math.random() * 100; // 0-100% 水平位置
                const startY = 30 + Math.random() * 30; // 30-60% 垂直位置（页面中部区域）
                
                const heart = createHeart(startX, startY);
                animateHeartRise(heart, startX, startY);
            }
            
            // 创建上部爱心
            function createTopHeart() {
                const startX = Math.random() * 100; // 0-100% 水平位置
                const startY = Math.random() * 30; // 0-30% 垂直位置（页面上部区域）
                
                const heart = createHeart(startX, startY);
                animateHeartRise(heart, startX, startY);
            }
            
            // 创建一组分布在不同区域的爱心
            function createHeartGroup() {
                // 分配爱心数量到各个区域
                const bottomHeartCount = Math.floor(Math.random() * 3) + 2; // 2-4个底部爱心
                const middleHeartCount = Math.floor(Math.random() * 3) + 1; // 1-3个中部爱心
                const topHeartCount = Math.floor(Math.random() * 2) + 1; // 1-2个顶部爱心
                
                // 创建底部爱心
                for (let i = 0; i < bottomHeartCount; i++) {
                    setTimeout(() => createBottomHeart(), i * 400); // 间隔更大
                }
                
                // 创建中部爱心
                for (let i = 0; i < middleHeartCount; i++) {
                    setTimeout(() => createMiddleHeart(), i * 400 + 200);
                }
                
                // 创建顶部爱心
                for (let i = 0; i < topHeartCount; i++) {
                    setTimeout(() => createTopHeart(), i * 400 + 400);
                }
            }
            
            // 启动爱心动画
            function startHeartAnimation() {
                // 初始创建一波爱心
                createHeartGroup();
                
                // 定期创建新的爱心群组
                setInterval(() => {
                    createHeartGroup();
                }, 1200); // 每1.2秒创建一组
                
                // 清理过多的爱心以保持性能
                setInterval(() => {
                    const allHearts = document.querySelectorAll('.heart');
                    if (allHearts.length > 90) {
                        for (let i = 0; i < allHearts.length - 70; i++) {
                            if (allHearts[i]) {
                                allHearts[i].remove();
                            }
                        }
                    }
                }, 2000); // 每2秒检查一次
            }
            
            startHeartAnimation();
        });
    </script>
</body>
</html>